<template>
  <!-- 筛选区 -->
  <div class="sub-filter">
    <div class="item">
      <!-- 1-品牌(固定的),所以单独拿出来拿出来写死 -->
      <div class="head">品牌：</div>
      <div class="body">
        <!-- <a href="javascript:;">全部</a> -->
        <!-- 但是品牌这一行的按钮标签,是有可能多个的,所以对从上层元素中拿到的筛选数据进行遍历 -->
        <!-- 给a标签进行动态赋值 active类型, 根据传入的selected状态-->
        <!-- 实现单选状态,
            给a标签注册点击事件,并且把点击谁,直接传入进去(简单思想) -->
        <a
          :class="{ active: brand.selected }"
          @click="setBrand(brand)"
          href="javascript:;"
          v-for="brand in subCateData.brands"
          :key="brand.id"
          >{{ brand.name }}</a
        >
      </div>
    </div>

    <!-- 2-分类商品规则数据,根据自身属性显示不固定的
       分析: 这里是不固定的,所以要先对外部标签进行渲染遍历-->
    <div class="item" v-for="prd in subCateData.saleProperties" :key="prd.id">
      <div class="head">{{ prd.name }}</div>
      <div class="body">
        <!-- <a href="javascript:;">全部</a> -->
        <!-- 分析: 这里是对外部标签包含的内部标签, 进行第二次渲染遍历 -->
        <!-- 给a标签进行动态赋值 active类型, 根据传入的selected状态-->
        <!-- 实现筛选单选条件,注册点击事件
             1.per 唇乳当前点击的小标签
             2.prd当前点击所有标签属性的集合的父亲
             -->
        <a
        @click="setPrd(per, prd)"
          :class="{ active: per.selected }"
          href="javascript:;"
          v-for="per in prd.properties"
          :key="per.id"
          >{{ per.name }}</a
        >
      </div>
    </div>
  </div>
</template>
<script>
import { inject } from 'vue-demi'
export default {
  name: 'SubFilter',
  setup () {
    // 接受父组件传过来的滤条件数据
    const subCateData = inject('subCateData')

    // 接受父组件传的过滤条件数据
    const filterParams = inject('filterParams')

    // 处理品牌点击选中高亮
    const setBrand = (currBrand) => {
      /**
       * 1-把之前的数据都改为未选择
       * 2-把当前的数据改为选中
       */
      //   console.log(subCateData)
      // 如果状态是ture,就直接return
      if (currBrand.selected) return
      // 对全部标签内的数据,进行循环遍历,并把它的数据状态改为false(未选择)
      subCateData.value.brands.forEach((item) => {
        item.selected = false
      })
      // 储存当前点击的品牌
      filterParams.value.brandId = currBrand.id
      // 对点击的小标签,进行状态设置为true
      currBrand.selected = true
    }

    // 处理筛选栏属性,点击选中
    // 传入数据  1-currPer 当前点击的标签属性   2-currPers 当前点击所有属性的集合
    const setPrd = (currPer, currPers) => {
      // 如果状态是ture,就直接return
      if (currPer.selected) return
      //   console.log(currPer, currPers)
      // 因为标签集合是数量不定的,所以要先遍历,把状态赋值为false
      currPers.properties.forEach(item => {
        item.selected = false
      })
      // 点击哪个标签,状态赋值为 true
      currPer.selected = true
      // 储存当前点击的商品属性(单选)
      /**
       * 1.不是全部的时候,新增条件(排重)
       * 2.每个属性 groupName下,只能选择一个条件(单选)
       */
      // 1.排重(利用数组的findindex方法)
      const index = filterParams.value.attrs.findIndex(item => currPers.name === item.groupName)
      // 如果索引有值,代表有数据,就删除
      if (index > -1) {
        filterParams.value.attrs.splice(index, 1)
      }
      // 如果是空,就把俺新点击的属性名和属性名具体的值push到attrs中
      if (currPer.id != null) {
        filterParams.value.attrs.push(
          { groupName: currPers.name, propertyName: currPer.name } // 属性名 ,属性名具体的值
        )
      }
    }

    return { subCateData, setBrand, setPrd }
  }
}
</script>
<style scoped lang='less'>
// 筛选区
.sub-filter {
  background: #fff;
  padding: 25px;
  .item {
    display: flex;
    padding: 10px 0;
    .head {
      width: 80px;
      color: #999;
    }
    .body {
      flex: 1;
      a {
        display: inline-block;
        margin-right: 36px;
        margin-bottom: 20px;
        transition: all 0.3s;
        border: 1px solid #eee;
        padding: 6px;
        //高亮效果
        &.active,
        &:hover {
          color: @xtxColor;
          border-color: @xtxColor;
        }
      }
    }
  }
}
</style>
